<script setup lang="tsx">
import { addDialog } from "@/components/ReDialog";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, onMounted, onUnmounted, toRaw, h } from "vue";
const defaultProps = {
  children: "children",
  label: "label"
};
import type { Tree, Tree2 } from "./utils/type";
import addDeviceForm, {
  type deviceFormProps
} from "./utils/add_server_form.vue";
import addGroupForm, { type groupFormProps } from "./utils/add_group_form.vue";
import updateGroupForm from "./utils/update_group_form.vue";
import addVariableForm, {
  type variableFormProps
} from "./utils/add_variable_form.vue";
import addVariableByDeviceForm, {
  type variableFormByDeviceProps
} from "./utils/add_variable_form_by_device.vue";
const loading = ref(false);
import {
  addServerData,
  deleteServerData,
  getServerData,
  updateServerData,
  addGroupData,
  getAcquisitionData,
  addVariableData,
  deleteGroupData,
  updateVariableData,
  deleteVariableData,
  updateGroupData,
  addVariableDataByDevice,
  addVariableDataByAll
} from "@/api/serverParameter";
import { useRole } from "./utils/hook";
import { ElMessageBox } from "element-plus";
import { message } from "@/utils/message";
const { onSearch, serverData, columns, editMap, onEdit } = useRole();
const showStyle = ref(false);
// 边缘采集的所有值
const variablesTreeData = ref();
// 右边树的数据
const tree_data = ref<Tree[]>([]);
onMounted(() => {
  // onSearch();
  searchServerData();
  getAcquisitionData().then(res => {
    variablesTreeData.value = res;
    tree_data.value = convertDataToTree(variablesTreeData.value);
  });
  // const result = getAcquisitionData();
  // variablesTreeData.value = result;
  // tree_data.value = convertDataToTree(variablesTreeData.value);
});
const selectedItemId = ref(null);
const selectedItemGroupId = ref(null);
const serverListData = ref();
const currentServerData = ref({
  id: 0,
  host: "",
  port: "",
  clientId: "",
  username: "",
  password: "",
  ssl: 0,
  protocol: "",
  configProject: "",
  configGateway: "",
  configSubTopic: "",
  configPubTopic: "",
  otaSubTopic: "",
  otaPubTopic: "",
  debugPubTopic: "",
  debugSubTopic: "",
  dataReport: {
    reportMode: 0,
    interval: 0,
    startTime: "",
    packageMode: 0,
    changeMode: 0,
    QOIMode: 0,
    resume: 0
  },
  dataOptions: {
    version: 0,
    gnss: 0,
    timestamp: 0,
    messageId: 0,
    sn: 0,
    clientId: 0,
    rssi: 0,
    customize: ""
  },
  online: {
    imei: 0,
    iccid: 0,
    mac: 0,
    sn: 0,
    clientId: 0,
    firmwareVersion: 0,
    model: 0,
    networkWay: 0,
    onlineContent: "",
    offlineContent: ""
  },
  topic: {
    dataCommon: {
      project: "",
      gatewayId: ""
    },
    trans: { sub: "", pub: "" },
    varRead: { sub: "", pub: "" },
    varWrite: { sub: "", pub: "" },
    online: "",
    report: { timing: "", history: "", change: "" },
    powerDown: ""
  },
  groups: []
});
// 当前选中变量组别的内容
const currentGroupData = ref({
  id: 0,
  servicesId: 0,
  name: "",
  variables: []
});
const dropdownOptions = [];

// 循环生成从00:00到23:55的时间间隔为5分钟的标签和值
for (let hour = 0; hour < 24; hour++) {
  for (let minute = 0; minute < 60; minute += 5) {
    const formattedHour = hour.toString().padStart(2, "0");
    const formattedMinute = minute.toString().padStart(2, "0");

    const label = `${formattedHour}:${formattedMinute}`;
    const value = [hour, minute];

    dropdownOptions.push({ label, value: JSON.stringify(value) });
  }
}
const bool_options = [
  { label: "FALSE", value: 0 },
  { label: "TRUE", value: 1 }
];
const agreement_options = [
  { label: "V5.0", value: "V5.0" },
  { label: "V5.1", value: "V5.1" },
  { label: "V5.2", value: "V5.2" },
  { label: "V5.3", value: "V5.3" },
  { label: "Alink", value: "Alink" }
];
const suffix_options = [
  { label: "0", value: 0 },
  { label: "1", value: 1 }
];
// 组成树 的数据格式
const convertDataToTree = (data: any[]): Tree[] => {
  if (!variablesTreeData.value || !Array.isArray(variablesTreeData.value)) {
    return []; // 返回空数组或者其他默认值，以防止报错
  }

  const tree: Tree[] = [];
  const parentNodeMap = {};

  data.forEach(item => {
    let parentNode = {
      label: item.subDeviceId,
      id: item.id,
      children: []
    };

    tree.push(parentNode);
    parentNodeMap[item.interfaceName] = parentNode;
    if (item.variables && Array.isArray(item.variables)) {
      item.variables.forEach(variable => {
        const childNode: Tree2 = {
          label: `${variable.key} [${variable.type}]`,
          parent: item.subDeviceId,
          id: variable.id
        };
        parentNode.children?.push(childNode);
      });
    }
  });

  return tree;
};
// 查出来全部设备/变量的数据
async function searchServerData() {
  serverListData.value = await getServerData();
  highlightItem(selectedItemId.value || 0);
  highlightItemGroup(selectedItemGroupId.value || 0);
}
// 删除 和修改 后  更新变量的数据
async function updatesearchServerData() {
  serverListData.value = await getServerData();
  // highlightItem(selectedItemId.value || 0);
  selectedItemId.value = selectedItemId.value;
  currentServerData.value = serverListData.value[selectedItemId.value];

  if (typeof currentServerData.value.dataReport.startTime === "string") {
  } else {
    currentServerData.value.dataReport.startTime = JSON.stringify(
      currentServerData.value.dataReport.startTime
    );
  }
  if (typeof currentServerData.value.online.onlineContent === "string") {
  } else {
    currentServerData.value.online.onlineContent = JSON.stringify(
      currentServerData.value.online.onlineContent
    );
  }
  if (typeof currentServerData.value.online.offlineContent === "string") {
  } else {
    currentServerData.value.online.offlineContent = JSON.stringify(
      currentServerData.value.online.offlineContent
    );
  }
  highlightItemGroup(selectedItemGroupId.value || 0);
}
// 点击服务器  (服务器高亮)
const highlightItem = index => {
  selectedItemId.value = index;
  currentServerData.value = serverListData.value[index];

  if (typeof currentServerData.value.dataReport.startTime === "string") {
  } else {
    currentServerData.value.dataReport.startTime = JSON.stringify(
      currentServerData.value.dataReport.startTime
    );
  }
  if (typeof currentServerData.value.online.onlineContent === "string") {
  } else {
    currentServerData.value.online.onlineContent = JSON.stringify(
      currentServerData.value.online.onlineContent
    );
  }
  if (typeof currentServerData.value.online.offlineContent === "string") {
  } else {
    currentServerData.value.online.offlineContent = JSON.stringify(
      currentServerData.value.online.offlineContent
    );
  }
  highlightItemGroup(0);
};
// 点击分组  (分组高亮)
const highlightItemGroup = async index => {
  selectedItemGroupId.value = index;
  currentGroupData.value = currentServerData.value.groups
    ? currentServerData.value.groups[index]
    : { variables: [] };
};
// 新增服务器按钮
function clickAddServer() {
  addDialog({
    width: "30%",
    title: "添加服务器",
    closeOnClickModal: false,
    draggable: true,
    props: {
      formInline: {
        name: "",
        endSystem: "",
        dataPlatform: "",
        communicationProtocol: ""
      }
    },
    contentRenderer: () => h(addDeviceForm),
    beforeSure: (done, { options }) => {
      async function chores() {
        done();
      }
      const { formInline } = options.props as deviceFormProps;
      addServerData([formInline]).then(res => {
        if (res.status === 5005) {
          message("服务器名称不能重复", { type: "error" });
          return;
        }
        chores();
        searchServerData();
      });
    }
  });
}
// 应用修改后的服务器参数
function updateConnectionParameters() {
  updateServerData([currentServerData.value]).then(() => {
    searchServerData();
    message("应用成功", { type: "success" });
  });
}
// 点击后面的删除该服务器
const deleteServer = item => {
  ElMessageBox.confirm(`确认删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      //删除处理确认操作
      message("删除成功", { type: "success" });
      deleteServerData([item.id]).then(() => {
        selectedItemId.value = 0;
        searchServerData();
      });
    })
    .catch(() => {
      // 取消操作
    });
};
const deleteGroup = item => {
  ElMessageBox.confirm(`确认删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      //删除处理确认操作
      message("删除成功", { type: "success" });
      deleteGroupData([item.id]).then(() => {
        searchServerData();
      });
    })
    .catch(() => {
      // 取消操作
    });
};

// 切换页面的显示情况
function changeShowStyle() {
  showStyle.value = !showStyle.value;
}
// 点击添加分组
function clickAddGroup() {
  addDialog({
    width: "30%",
    title: "添加分组",
    closeOnClickModal: false,
    draggable: true,
    props: {
      // 赋默认值
      formInline: {
        servicesId: currentServerData.value.id,
        name: ""
      }
    },
    contentRenderer: () => h(addGroupForm),
    beforeSure: (done, { options }) => {
      async function chores() {
        done();
      }
      const { formInline } = options.props as groupFormProps;
      addGroupData([formInline]).then(res => {
        if (res.status === 5005) {
          message("分组名称不能重复", { type: "error" });
          return;
        }
        chores();
        searchServerData();
      });
    }
  });
}
// 修改组别的信息
async function updateGroup(item, index) {
  await highlightItemGroup(index);
  addDialog({
    width: "30%",
    title: `修改分组 ${item.name}`,
    closeOnClickModal: false,
    draggable: true,
    props: {
      formInline: {
        id: currentGroupData.value.id,
        name: item.name
      }
    },
    contentRenderer: () => h(updateGroupForm),
    beforeSure: (done, { options }) => {
      async function chores() {
        done();
      }
      const { formInline } = options.props as groupFormProps;
      updateGroupData([formInline]).then(res => {
        if (res.status === 5005) {
          message("分组名称不能重复", { type: "error" });
          return;
        }
        chores();
        updatesearchServerData();
      });
    }
  });
}
const typeMapping = {
  Bool: "bool",
  U16_00: "bool",
  U16_01: "bool",
  U16_02: "bool",
  U16_03: "bool",
  U16_04: "bool",
  U16_05: "bool",
  U16_06: "bool",
  U16_07: "bool",
  U16_08: "bool",
  U16_09: "bool",
  U16_10: "bool",
  U16_11: "bool",
  U16_12: "bool",
  U16_13: "bool",
  U16_14: "bool",
  U16_15: "bool",
  U8_00: "bool",
  U8_01: "bool",
  U8_02: "bool",
  U8_03: "bool",
  U8_04: "bool",
  U8_05: "bool",
  U8_06: "bool",
  U8_07: "bool",
  Int16: "Int",
  Int32: "Int",
  SBCD16: "Int",
  SBCD32: "Int",
  Uint16: "Uint",
  Uint32: "Uint",
  BCD16: "Uint",
  BCD32: "Uint",
  Float: "Float",
  Double: "Double",
  Int64: "int_64",
  SBCD64: "int_64",
  Uint64: "uint_64",
  BCD64: "uint_64",
  Str: "String",
  HEX: "String"
};
function simplifyType(inputType) {
  const simplifiedType = typeMapping[inputType] || inputType;
  return simplifiedType;
}
//   点击 第三列的变量
const selectVariables = (data: Tree2) => {
  if (!data.children) {
    if (currentGroupData.value) {
      const data_key = data.label.replace(/\s*\[.*?\]/g, "");
      const data_type = data.label.match(/\[(.*?)\]/)[1];
      // const simplifiedType = simplifyType(data_type);
      // console.log("data_type", simplifiedType);
      addDialog({
        width: "30%",
        title: `给组${currentGroupData.value.name} 添加变量 ${data.label}`,
        closeOnClickModal: false,
        props: {
          formInline: {
            servicesId: currentServerData.value.id,
            serviceGroupId: currentGroupData.value.id,
            acquisitionVariablesId: data.id,
            totalBit: 0,
            dataKey: data_key ?? "",
            type: simplifyType(data_type),
            dataProcessing: `=${data_key ?? ""}@${data?.parent ?? ""}`,
            triggeringEvent: "",
            decimalPlaces:
              simplifyType(data_type) == "Double" ||
              simplifyType(data_type) == "Float"
                ? 2
                : 0
          }
        },
        contentRenderer: () => h(addVariableForm),
        beforeSure: (done, { options }) => {
          async function chores() {
            done();
          }
          const { formInline } = options.props as deviceFormProps;
          formInline.decimalPlaces = Number(formInline.decimalPlaces);
          addVariableData([formInline]).then(res => {
            if (res.status === 5005) {
              message("数据键名不能重复", { type: "error" });
              return;
            }
            chores();
            updatesearchServerData();
          });
        }
      });
    } else {
      message("请先选择分组", { type: "warning" });
    }
  } else {
    // 一键添加  按照设备添加
    addDialog({
      width: "30%",
      title: `添加设备 ${data.label} 下所有的变量为组`,
      closeOnClickModal: false,
      props: {
        // 赋默认值
        formInline: {
          groupName: data?.label ?? "",
          acquisitionId: data.id,
          servicesId: currentServerData.value.id,
          totalBit: 0,
          triggeringEvent: "",
          decimalPlaces: 0
        }
      },
      contentRenderer: () => h(addVariableByDeviceForm),
      beforeSure: (done, { options }) => {
        async function chores() {
          done();
        }
        const { formInline } = options.props as deviceFormProps;
        formInline.decimalPlaces = Number(formInline.decimalPlaces);
        addVariableDataByDevice([formInline]).then(res => {
          if (res.status === 5005) {
            message("分组名称不能重复", { type: "error" });
            return;
          }
          chores();
          updatesearchServerData();
        });
      }
    });
  }
};
// 添加全部的变量
function addAllVariable() {
  addVariableDataByAll({ servicesId: currentServerData.value.id }).then(res => {
    if (res.status === 5005) {
      message("分组名称有重复", { type: "error" });
      return;
    }
    updatesearchServerData();
  });
  // addDialog({
  //   width: "30%",
  //   title: `添加所有的变量为组`,
  //   closeOnClickModal: false,
  //   props: {
  //     // 赋默认值
  //     formInline: {
  //       servicesId: currentServerData.value.id,
  //       totalBit: 0,
  //       triggeringEvent: "",
  //       decimalPlaces: 0
  //     }
  //   },
  //   contentRenderer: () => h(addVariableByDeviceForm),
  //   beforeSure: (done, { options }) => {
  //     async function chores() {
  //       done();
  //     }
  //     const { formInline } = options.props as deviceFormProps;
  //     formInline.decimalPlaces = Number(formInline.decimalPlaces);
  //     addVariableDataByAll([formInline]).then(res => {
  //       if (res.status === 5005) {
  //         message("分组名称不能重复", { type: "error" });
  //         return;
  //       }
  //       chores();
  //       updatesearchServerData();
  //     });
  //   }
  // });
}
// 点击变量后面的删除
function deleteVariable(row) {
  deleteVariableData([row.id]).then(() => {
    updatesearchServerData();
  });
}
// 保存变量的时候
function onSave(index) {
  let param = toRaw(currentGroupData.value.variables[index]);
  param.decimalPlaces = Number(param.decimalPlaces);
  const params = {
    ...param,
    servicesVariablesId: param.id || param.servicesVariablesId,
    servicesId: currentServerData.value.id,
    serviceGroupId: currentGroupData.value.id
  };

  Promise.resolve().then(() => {
    updateVariableData([params]).then(res => {
      if (res.status === 5005) {
        message("数据键名不能重复", { type: "error" });
        return;
      }
      editMap.value[index].editable = false;
    });
  });
}

// 修改时点击取消的时候
function onCancel(index) {
  editMap.value[index].editable = false;
  searchServerData();
}
onUnmounted(() => {
  console.log("sse close");
});
defineOptions({
  name: "ServerParameter"
});
</script>

<template>
  <div v-loading="loading" element-loading-text="加载中..." class="content">
    <div class="content_left">
      <el-button
        type="primary"
        size="small"
        style="margin-bottom: 10px"
        @click="clickAddServer()"
        >添加服务器</el-button
      >
      <div
        v-for="(item, index) in serverListData"
        :key="index"
        :title="`${item.name} [${item.endSystem}:${item.dataPlatform}]`"
        :class="{ server_item: true, highlighted: index === selectedItemId }"
        @click="highlightItem(index)"
      >
        <span class="server_item_span">
          {{ index + 1 }}: {{ item.name }} [{{ item.endSystem }}:{{
            item.dataPlatform
          }}]</span
        >

        <el-button
          class="delete_btn"
          type="danger"
          size="small"
          title="删除"
          link
          @click="deleteServer(item)"
        >
          D
        </el-button>
      </div>
      <div v-if="!serverListData" style="color: #9c9696; text-align: center">
        请先添加服务器
      </div>
    </div>
    <!-- 右侧内容 -->
    <div class="content_middle">
      <div class="update_button">
        <el-button
          v-if="showStyle"
          type="primary"
          circle
          size="large"
          style="width: 50px; height: 50px"
          @click="changeShowStyle()"
        >
          变 量
        </el-button>
        <el-button
          v-if="showStyle"
          type="primary"
          circle
          size="large"
          style="width: 50px; height: 50px"
          @click="updateConnectionParameters()"
        >
          应 用
        </el-button>
        <el-button
          v-if="!showStyle"
          type="primary"
          circle
          size="large"
          style="width: 50px; height: 50px"
          @click="changeShowStyle()"
        >
          参 数
        </el-button>
      </div>
      <!-- {{ currentServerData.dataReport }} <br />
      {{ currentServerData.online }} -->
      <!-- 参数的显示 -->
      <div v-if="showStyle">
        <!-- 连接参数 -->
        <el-card shadow="never" class="every_card">
          <h4>连接参数</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="host" label="地址">
                  <el-input v-model="currentServerData.host" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="port" label="端口">
                  <el-input v-model="currentServerData.port" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="clientId" label="客户端ID">
                  <el-input v-model="currentServerData.clientId" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="username" label="用户名">
                  <el-input v-model="currentServerData.username" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="password" label="密码">
                  <el-input
                    v-model="currentServerData.password"
                    type="password"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="ssl" label="SSL">
                  <el-select v-model="currentServerData.ssl">
                    <el-option label="不启用" :value="0" />
                    <el-option label="无CA证书" :value="1" />
                    <el-option label="服务器CA证书" :value="2" />
                    <el-option label="服务器/客户端CA证书" :value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 项目主题共有项 -->
        <el-card shadow="never" class="every_card">
          <h4>配置主题共有项</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="configProject" label="项目">
                  <el-input v-model="currentServerData.configProject" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="configGateway" label="网关">
                  <el-input v-model="currentServerData.configGateway" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="configPubTopic" label="配置发布">
                  <el-input v-model="currentServerData.configPubTopic" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="configSubTopic" label="配置订阅">
                  <el-input v-model="currentServerData.configSubTopic" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="otaPubTopic" label="更新发布">
                  <el-input v-model="currentServerData.otaPubTopic" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="otaSubTopic" label="更新订阅">
                  <el-input v-model="currentServerData.otaSubTopic" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="debugPubTopic"
                  label="远程调试发布"
                  title="远程调试发布"
                >
                  <el-input v-model="currentServerData.debugPubTopic" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="debugSubTopic"
                  label="远程调试订阅"
                  title="远程调试订阅"
                >
                  <el-input v-model="currentServerData.debugSubTopic" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 协议 -->
        <el-card shadow="never" class="every_card">
          <h4>协议</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="networkWay" label="协议">
                  <el-select v-model="currentServerData.protocol">
                    <el-option
                      v-for="(item, index) in agreement_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 数据主题共有项 -->
        <el-card shadow="never" class="every_card">
          <h4>数据主题共有项</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="project" label="项目">
                  <el-input
                    v-model="currentServerData.topic.dataCommon.project"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="gatewayId" label="网关">
                  <el-input
                    v-model="currentServerData.topic.dataCommon.gatewayId"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="100">
              <!-- 读变量 的 发布订阅 -->
              <el-col :span="4">
                <el-form-item prop="pub" label="读变量发布">
                  <el-input v-model="currentServerData.topic.varRead.pub[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="pub" class="suffix">
                  <el-select v-model="currentServerData.topic.varRead.pub[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sub" label="读变量订阅">
                  <el-input v-model="currentServerData.topic.varRead.sub[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="pub" class="suffix">
                  <el-select v-model="currentServerData.topic.varRead.sub[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 写变量 的 发布订阅 -->
              <el-col :span="4">
                <el-form-item prop="pub" label="写变量发布">
                  <el-input v-model="currentServerData.topic.varWrite.pub[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="pub" class="suffix">
                  <el-select v-model="currentServerData.topic.varWrite.pub[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sub" label="写变量订阅">
                  <el-input v-model="currentServerData.topic.varWrite.sub[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="pub" class="suffix">
                  <el-select v-model="currentServerData.topic.varWrite.sub[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 透传的 -->
              <el-col :span="4">
                <el-form-item prop="pub" label="透传发布">
                  <el-input v-model="currentServerData.topic.trans.pub[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="pub" class="suffix">
                  <el-select v-model="currentServerData.topic.trans.pub[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sub" label="透传订阅">
                  <el-input v-model="currentServerData.topic.trans.sub[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="pub" class="suffix">
                  <el-select v-model="currentServerData.topic.trans.sub[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 上线发布 -->
              <el-col :span="4">
                <el-form-item prop="online" label="上线发布">
                  <el-input v-model="currentServerData.topic.online[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="online" class="suffix">
                  <el-select v-model="currentServerData.topic.online[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- 周期及定时上报发布 -->
              <el-col :span="4">
                <el-form-item
                  prop="timing"
                  label="周期及定时上报发布"
                  title="周期及定时上报发布"
                >
                  <el-input
                    v-model="currentServerData.topic.report.timing[0]"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="timing" class="suffix">
                  <el-select v-model="currentServerData.topic.report.timing[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 历史数据发布 -->
              <el-col :span="4">
                <el-form-item prop="history" label="历史数据发布">
                  <el-input
                    v-model="currentServerData.topic.report.history[0]"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="history" class="suffix">
                  <el-select
                    v-model="currentServerData.topic.report.history[1]"
                  >
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 变化上报发布 -->
              <el-col :span="4">
                <el-form-item prop="change" label="变化上报发布">
                  <el-input
                    v-model="currentServerData.topic.report.change[0]"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="change" class="suffix">
                  <el-select v-model="currentServerData.topic.report.change[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 断电报警发布 -->
              <el-col :span="4">
                <el-form-item prop="powerDown" label="断电报警发布">
                  <el-input v-model="currentServerData.topic.powerDown[0]" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="powerDown" class="suffix">
                  <el-select v-model="currentServerData.topic.powerDown[1]">
                    <el-option
                      v-for="(item, index) in suffix_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 上线报文 -->
        <el-card shadow="never" class="every_card">
          <h4>上线报文</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="imei" label="IMEI">
                  <el-select v-model="currentServerData.online.imei">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="iccid" label="ICCID">
                  <el-select v-model="currentServerData.online.iccid">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="mac" label="MAC">
                  <el-select v-model="currentServerData.online.mac">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sn" label="SN">
                  <el-select v-model="currentServerData.online.sn">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item prop="clientId" label="ClientId">
                  <el-select v-model="currentServerData.online.clientId">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="networkWay" label="NetworkAccess">
                  <el-select v-model="currentServerData.online.networkWay">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="model" label="Model">
                  <el-select v-model="currentServerData.online.model">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="firmwareVersion"
                  label="FirmwareVersion"
                  title="FirmwareVersion"
                >
                  <el-select v-model="currentServerData.online.firmwareVersion">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="onlineContent" label="上线报文">
                  <el-input v-model="currentServerData.online.onlineContent" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="offlineContent" label="下线报文">
                  <el-input v-model="currentServerData.online.offlineContent" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 上报 -->
        <el-card shadow="never" class="every_card">
          <h4>上报</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item
                  prop="reportMode"
                  label="周期及定时上报模式"
                  title="周期及定时上报模式"
                >
                  <el-select v-model="currentServerData.dataReport.reportMode">
                    <el-option label="周期" :value="0" />
                    <el-option label="定时定点" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="interval" label="上报间隔">
                  <el-input
                    v-model="currentServerData.dataReport.interval"
                    type="number"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item prop="startTime" label="起始时间">
                  <el-select v-model="currentServerData.dataReport.startTime">
                    <el-option
                      v-for="(item, index) in dropdownOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item
                  prop="packageMode"
                  label="周期及定时上报组包"
                  title="周期及定时上报组包"
                >
                  <el-select v-model="currentServerData.dataReport.packageMode">
                    <el-option label="全网关" :value="0" />
                    <el-option label="单设备" :value="1" />
                    <el-option label="分包" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="changeMode" label="数据变化组包">
                  <el-select v-model="currentServerData.dataReport.changeMode">
                    <el-option label="0" :value="0" />
                    <el-option label="1" :value="1" />
                    <el-option label="2" :value="2" />
                    <el-option label="3" :value="3" />
                    <el-option label="4" :value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="QOIMode" label="通讯失败显示">
                  <el-select v-model="currentServerData.dataReport.QOIMode">
                    <el-option label="bad" :value="0" />
                    <el-option label="0" :value="1" />
                    <el-option label="上次值" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="resume" label="断网续传">
                  <el-select v-model="currentServerData.dataReport.resume">
                    <el-option label="OFF" :value="0" />
                    <el-option label="ON" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 报文可选项 -->
        <el-card shadow="never" class="every_card">
          <h4>报文可选项</h4>
          <el-form
            label-position="top"
            :model="currentServerData"
            class="card_form"
          >
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="version" label="Version">
                  <el-select v-model="currentServerData.dataOptions.version">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="gnss" label="GNSS">
                  <el-select v-model="currentServerData.dataOptions.gnss">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="timestamp" label="Timestamp">
                  <el-select v-model="currentServerData.dataOptions.timestamp">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="messageId" label="MessageId">
                  <el-select v-model="currentServerData.dataOptions.messageId">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item prop="sn" label="SN">
                  <el-select v-model="currentServerData.dataOptions.sn">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="clientId" label="ClientId">
                  <el-select v-model="currentServerData.dataOptions.clientId">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="rssi" label="RSSI">
                  <el-select v-model="currentServerData.dataOptions.rssi">
                    <el-option
                      v-for="(item, index) in bool_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="customize" label="自定义">
                  <el-input v-model="currentServerData.dataOptions.customize" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <!-- 变量的显示 -->
      <div v-if="!showStyle" class="variable_page">
        <div class="variable_left">
          <!-- 变量的组别 -->
          <div class="variable_group">
            <el-button
              type="primary"
              size="small"
              style="margin-bottom: 10px"
              @click="clickAddGroup()"
              >添加分组</el-button
            >
            <!-- 变量分组的列表 -->
            <div
              v-for="(item, index) in currentServerData.groups"
              :key="index"
              :title="`${item.name}`"
              :class="{
                server_item: true,
                highlighted: index === selectedItemGroupId
              }"
              @click="highlightItemGroup(index)"
            >
              <span class="server_item_span">
                {{ index + 1 }}: {{ item.name }}</span
              >
              <el-button
                class="delete_btn"
                style="right: 20px; color: #bfbb40"
                type="danger"
                size="small"
                title="修改"
                link
                @click="updateGroup(item, index)"
              >
                U
              </el-button>
              <el-button
                class="delete_btn"
                type="danger"
                size="small"
                title="删除"
                link
                @click="deleteGroup(item)"
              >
                D
              </el-button>
            </div>
            <div
              v-if="!currentServerData.groups.length"
              style="color: #9c9696; text-align: center"
            >
              请先添加分组
            </div>
            <!-- {{ selectedItemGroupId }} -->
          </div>

          <!-- 变量的表格 -->
          <div class="variable_table">
            <pure-table
              class="pure"
              border
              row-key="id"
              align-whole="center"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              :columns="columns"
              :data="currentGroupData ? currentGroupData.variables : []"
            >
              <!--  -->
              <template #operation="{ row, index }">
                <el-button
                  v-if="!editMap[index]?.editable"
                  class="reset-margin"
                  link
                  type="primary"
                  :icon="useRenderIcon(EditPen)"
                  @click="onEdit(row, index)"
                >
                  修改
                </el-button>
                <div v-else>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    @click="onSave(index)"
                  >
                    保存
                  </el-button>
                  <el-button class="reset-margin" link @click="onCancel(index)">
                    取消
                  </el-button>
                </div>
                <el-button
                  v-if="!editMap[index]?.editable"
                  class="reset-margin"
                  link
                  type="primary"
                  :icon="useRenderIcon(Delete)"
                  @click="deleteVariable(row)"
                >
                  删除
                </el-button>
              </template>
            </pure-table>
            <!-- {{ currentGroupData }} -->
          </div>
        </div>

        <!-- 变量的选项 -->
        <div class="variable_option">
          <el-button
            type="primary"
            size="small"
            style="margin-bottom: 5px"
            @click="addAllVariable()"
            >全部添加</el-button
          >
          <el-tree
            style="max-width: 250px"
            :data="tree_data"
            :indent="5"
            node-key="id"
            :props="defaultProps"
            default-expand-all
            @node-click="selectVariables"
          >
            <template #default="{ node }">
              <div class="custom-tree-node">
                <span
                  :title="node.label"
                  style="
                    display: block;
                    width: 180px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  >{{ node.label }}</span
                >
              </div>
            </template>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped sass>
.content {
  width: 99%;
  height: calc(86vh - 12px);
  display: flex;
  justify-content: space-around;
}

.content_left {
  width: 170px;
  height: 100%;
  overflow-x: hidden;
  border-radius: 10px;
  background-color: #eaeaee;
  padding: 10px;
  /* font-size: 0.7rem; */
}
.content_middle {
  width: calc(100% - 188px);
  height: 100%;
  border-radius: 10px;
  background-color: #f0f2f5;
  position: relative;
  /* border: 1px solid red; */
  overflow-y: auto;
}
.update_button {
  position: fixed;
  left: 220px;
  bottom: 60px;
  z-index: 99;
}
.highlighted {
  background-color: #ebf5ff;
  border-radius: 3px;
}
.server_item {
  cursor: pointer;
  margin-bottom: 5px;
  padding-left: 5px;
  height: 20px;
  line-height: 20px;
  position: relative;
  font-size: 0.7rem;
  display: flex;
}
.variables_item {
  cursor: pointer;
  margin-bottom: 5px;
  padding-left: 5px;
  height: 20px;
  line-height: 20px;
  font-size: 0.7rem;
  display: flex;
  user-select: none;
}

.every_card :deep(.el-card__body) {
  padding: 5px 20px 5px 5px !important;
}

/* 整体的label  value框 */
.card_form :deep(.el-col) {
  padding: 0px 0px 0px 5px !important;
  /* border: 1px solid red; */
}
.card_form :deep(.el-form-item) {
  margin-bottom: 8px;
}

.card_form :deep(.el-form-item--label-top) {
  display: flex !important;
}

/* form前面的label */
.card_form :deep(.el-form-item__label) {
  line-height: 32px !important;
  margin-bottom: 0 !important;
  width: 86px !important;
  padding-right: 8px !important;
  text-align: right !important;
  font-size: 0.7rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* card两边的距离 */
.card_form :deep(.el-row) {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.suffix :deep(.el-select__wrapper) {
  /* padding: 4px 6px !important ; */
}
.server_item_span {
  display: block;
  width: calc(100% - 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.delete_btn {
  position: absolute;
  z-index: 999;
  right: 0px;
  height: 20px;
}
.variable_page {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  justify-content: space-between;
}
.variable_page > div {
  /* border: 1px solid red; */
  border-radius: 10px;
}
.variable_left {
  width: calc(100% - 260px);
  display: flex;
}
.variable_group {
  width: 200px;
  height: 100%;
  padding: 10px;
  background-color: #eaeaee;
  overflow-y: auto;
  overflow-x: hidden;
}
.variable_option {
  width: 250px;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #eaeaee;
}
.variable_table {
  width: calc(100% - 200px);
  height: 100%;
  padding: 10px;
  background-color: #eaeaee;
  overflow-y: auto;
  overflow-x: hidden;
}
.custom-tree-node {
  /* flex: 1; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  font-size: 0.7rem;
  width: 200px !important;
}
.pure :deep(.el-table__header-wrapper) {
  font-size: 0.8rem !important;
}
.pure :deep(.el-table__body-wrapper) {
  font-size: 0.7rem !important;
}

.pure :deep(.cell) {
  padding: 0 6px !important;
}
/* 后面俩按钮的大小 */
.pure :deep(.el-button--primary) {
  font-size: 0.8rem !important;
}
/* .pure :deep(.el-button--primary) {
  font-size: 0.8rem !important;
} */
</style>
